<script setup lang="ts">
import {onBeforeMount, ref} from "vue";
import {getLink} from "@/api/footer/footer";
import {commonConsoleLog, ECode} from "@/util/commonUtil";
import {UserOutlined} from "@ant-design/icons-vue"
import {recorderBehavior} from "@/api/system/system";

const linkList = ref<any>([])

onBeforeMount(() => {
  getLinkList()
  // 3S后埋点信息上报
  setTimeout(() => {
    recorderBehavior({'otherData': '友链', 'behavior': 'VISIT_PAGE'}).then((response: any) => {
      if (response.code == ECode.SUCCESS) {
        commonConsoleLog('友链页信息上报成功')
      }
    })
  }, 3000)
})

function getLinkList() {
  getLink().then((response: any) => {
    if (response.code === ECode.SUCCESS) {
      linkList.value = response.data
    }
  })
}

function ToGo(item: string) {
  window.open(item, '_blank');
}
</script>

<template>
  <section class="friendsPage">
    <a-row :gutter="[16,16]" class="flex justify-between">
      <a-col :span="24">
        <article class="post">
          <section class="friendMain">
            <span class="friendMainTitle overflow-hidden leading-[1] h-[0.8em] text-[40px]">友联聚合</span>
            <ul class="grid gap-4 m-0 friendList">
              <template v-for="item in linkList">
                <li class="friendItem flex flex-col justify-between overflow-hidden">
                  <a-card hoverable size="small" style="border-radius: var(--radius)" @click="ToGo(item.url)">
                    <template #cover>
                      <img
                          alt=""
                          :src="'https://s0.wp.com/mshots/v1/'+item.url"
                      />
                    </template>
                    <a-card-meta :title="item.title" :description="item.summary">
                      <template #avatar>
                        <a-avatar :src="item.avatar" v-if="item.avatar"/>
                        <a-avatar v-else>
                          <template #icon>
                            <UserOutlined/>
                          </template>
                        </a-avatar>
                      </template>
                    </a-card-meta>
                  </a-card>
                </li>
              </template>
            </ul>
          </section>
        </article>
      </a-col>
    </a-row>
  </section>
</template>

<style scoped lang="less">
.friendsPage {
  margin: var(--edge-tb) var(--edge-lr) var(--edge-lr);
}

.friendMain {
  animation: var(--animation);
  animation-delay: .7s;
}

.friendMainTitle {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: thin hsl(var(--font-color) / .3);
  letter-spacing: var(--font-spacing);
}

.friendItem {
  gap: .5em;
  background: var(--w-bg);
  border-radius: var(--radius);
  box-shadow: var(--box-shadow-white);
}
</style>
